<!-- 列表选择器示例 -->
<script setup lang="ts">
import selectConfig from './config/select'

interface IUser {
	id: number
	username: string
	nickname: string
	mobile: string
	genderLabel: string
	avatar: string
	email: string | null
	status: number
	deptName: string
	roleNames: string
	createTime: string
}
const selectedUser = ref<IUser>()
function handleConfirm(data: IUser[]) {
	selectedUser.value = data[0]
}
const text = computed(() => {
	return selectedUser.value
		? `${selectedUser.value.username} - ${selectedUser.value.genderLabel} - ${selectedUser.value.deptName}`
		: ''
})
</script>

<template>
	<div class="app-container">
		<el-link
			href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
			type="primary"
			target="_blank"
			class="mb-10"
		>
			示例源码 请点击>>>>
		</el-link>
		<table-select
			:text="text"
			:select-config="selectConfig"
			@confirm-click="handleConfirm"
		>
			<template #status="scope">
				<el-tag :type="scope.row[scope.prop] === 1 ? 'success' : 'info'">
					{{ scope.row[scope.prop] === 1 ? '启用' : '禁用' }}
				</el-tag>
			</template>
		</table-select>
	</div>
</template>
